import { Row, Tooltip } from 'antd';
import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import Icon from '@/components/layout/Icon';
import Diamond from '@/components/diamond';
import Trapezium from '@/components/trapezium';
import { story_list } from '@/request/story';
import NoData from '@/components/noData';
import StoryCard from '../storyCard';

const Storys = () => {
  const [storyList, setStoryList] = useState<any>([]);
  const [timeCondition, setTimeCondition] = useState('week');
  const router = useRouter();
  // 获取需求列表
  const getStoryList = async () => {
    try {
      const res: any = await story_list({ isAll: true, timeCondition });
      if (res) {
        setStoryList(res);
      }
    } catch (err) {
      console.log(err);
    }
  };
  useEffect(() => {
    getStoryList();
  }, [timeCondition]);
  return (
    <div className="dashboard-box story-list">
      <div className="choose-time">
        <Row>
          <Trapezium
            text="本周上线需求"
            style={{ marginRight: '10px' }}
            actived={timeCondition === 'week'}
            onClick={() => {
              setTimeCondition('week');
            }}
          />
          <Diamond
            text="本月上线需求"
            actived={timeCondition === 'month'}
            onClick={() => {
              setTimeCondition('month');
            }}
          />
        </Row>
        <Tooltip title="更多" placement="bottom">
          <Icon
            src="/images/more.png"
            width={24}
            height={24}
            className="more"
            onClick={() => {
              router.push('/storyManage');
            }}
          />
        </Tooltip>
      </div>
      <div className="story-box">
        {storyList && storyList.length ? storyList.map((item: any) => <StoryCard key={item.id} {...item} />) : <NoData src="/images/story-none.png" marginTop="100px" text="暂无需求" />}
      </div>
    </div>
  );
};
export default Storys;
